<template>
	<view class="container" v-if="showPage == 'my'">
		<view class="avatar">
			<image :src="avatar"></image>
			<!-- <span class="uname">{{uname}}</span> -->
			<span class="uname">{{uname}}</span>
		</view>
		<view class="control">
			<view class="control_list" @click="changeUser(0)">
				<view class="control_icon">
					<!-- <span class="iconfont icon-banshou"></span> -->
					<span class="control_font">修改用户名</span>
				</view>
				<span class="iconfont icon-jiantou2:before"></span>
			</view>
			<view class="control_list" @click="changeAvatar">
				<view class="control_icon">
					<!-- <span class="iconfont icon-shezhi"></span> -->
					<span class="control_font">设置头像</span>
				</view>
				<span class="iconfont icon-jiantou2:before"></span>
			</view>
			<view class="control_list" @click="changeUser(1)">
				<view class="control_icon">
					<!-- <span class="iconfont icon-banshou"></span> -->
					<span class="control_font">修改密码</span>
				</view>
				<span class="iconfont icon-jiantou2:before"></span>
			</view>
			<view class="control_list" @click="safeQuite">
				<view class="control_icon">
					<!-- <span class="iconfont icon-shezhi"></span> -->
					<span class="control_font">安全退出</span>
				</view>
				<span class="iconfont icon-jiantou2:before"></span>
			</view>
			<view class="control_list" @click="about">
				<view class="control_icon">
					<!-- <span class="iconfont icon-guanyuwomen"></span> -->
					<span class="control_font">关于我们</span>
				</view>
				<span class="iconfont icon-jiantou2:before"></span>
			</view>
			<view class="copyright">
				version1.0
			</view>
		</view>
	</view>
	<avatar v-else-if="showPage=='avatar'" @back="back"></avatar>
	<user v-else-if="showPage=='user'" :needChangePwd="needChangePwd" @back="back"></user>
	<aboutus v-else-if="showPage == 'us'" @back="back"></aboutus>
</template>

<script>
	import avatar from "../../components/my/avatar.vue";
	import user from "../../components/my/user.vue";
	import aboutus from "../../components/my/aboutUs.vue";
	import store from '@/store/index.js'; //需要引入store
	import checkALL from "../../tools/checkToken/index.js";
	import {
		mapGetters
	} from 'vuex' //引入mapState
	export default {
		// onLoad() {
		// 	checkALL.checkToken(this.$store.state.token)
		// },
		components: {
			avatar,
			user,
			aboutus
		},
		data() {
			return {
				showPage: "my",
				//avatar: getApp().globalData.avatar,
				//uname: getApp().globalData.uname,
				needChangePwd: 0
			}
		},
		methods: {
			changeAvatar() {
				this.showPage = "avatar";
			},
			changeUser(num) {
				this.showPage = "user";
				this.needChangePwd = num;
			},
			back(page) {
				this.showPage = page;
			},
			safeQuite(){
				getApp().globalData.uid = "";
				getApp().globalData.isHave = "";
				store.commit('doavatar', {
					avatar: ""
				});
				store.commit("douname", {
					uname: ""
				});
				store.commit("dotoken", {
					token: ""
				});
				uni.redirectTo({
					url:"/pages/index/index"
				})
			},
			about() {
				this.showPage = "us"
			}
		},
		computed: {
			...mapGetters([
				'uname', 'avatar'
			])
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.avatar {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			text-align: center;
			padding-top: 20rpx;
			border-bottom: 2rpx solid lightgray;

			image {
				height: 150rpx;
				width: 150rpx;
				border: 5rpx solid lightgray;
				border-radius: 50%;
			}

			.uname {
				height: 100rpx;
				width: 100%;
				line-height: 100rpx;
				margin-top: 10rpx;
				font-size: 38rpx;
			}
		}

		.control {
			display: flex;
			flex-direction: column;

			.control_list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 38rpx;
				box-sizing: border-box;
				padding-left: 10rpx;
				padding-right: 10rpx;
				height: 120rpx;
				line-height: 120rpx;
				border-bottom: 2rpx solid lightgray;

				.control_icon {
					.iconfont {
						color: #00aa7f;
						font-size: 40rpx;
					}

					.control_font {
						margin-left: 20rpx;
					}
				}
			}

			.copyright {
				width: 100%;
				height: 300rpx;
				line-height: 600rpx;
				text-align: center;
				font-size: 60rpx;
				color: lightgrey;

			}
		}
	}
</style>